<template>
	<view class="height-screen">
		<cu-custom bgColor="customColor" isBack backColor="text-white">
			<block slot="content">
				<text class="text-white">{{$t('tabBar.home')}}</text>
			</block>
		</cu-custom>
		<view class="padding-sm customColor">
			<u-search :placeholder="$t('home.searchMsg')" v-model="keyword" height="35" searchIconSize="30"
				:clearabled="false" :showAction="false" @search="handleSearch"></u-search>
		</view>
		<view class="margin-ht grid gap padding-bottom-sm" style="margin-top: 25rpx;">
			<view class="bg-white radius-xs padding-sm flex align-center"
				style="box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(0,0,0,0.15);" v-for="(item,index) in dataList"
				:key="index">
				<image :src="helper.handleImage(item.image)" style="width: 150rpx;height: 150rpx;"
					class="radius-xs flex-shrink" />
				<view class="grid flex-sub margin-left-sm" style="gap: 8rpx;">
					<text class="font-bold text-black text-df one-line">{{item.name}}</text>
					<text class="text-xs text-gray font-400 one-line">{{item.introduce}}</text>
					<text class="text-xl text-red font-bold">${{item.price}}</text>
					<view class="flex justify-between align-center">
						<view class="flex align-center text-gray text-xs font-400">
							<text>{{$t('home.mothSallNum')}}:{{item.total_sall_num}}</text>
							<text class="margin-left">{{$t('group.comment')}}:{{item.comment_num}}</text>
						</view>
						<view class="flex align-center">
							<image src="@/static/img/collect.png" style="width: 35rpx;height: 33rpx;"
								v-if="item.collect_status==0" @tap.stop="handleLike(item.id,index,0)" />
							<image src="@/static/img/collectActive.png" style="width: 35rpx;height: 33rpx;" v-else
								@tap.stop="handleLike(item.id,index,1)" />
							<image src="@/static/img/carAdd.png" style="width: 42rpx;height: 39rpx;" class="margin-left"
								@tap.stop="cartAdd(item.id)" />
						</view>
					</view>
				</view>
			</view>
			<section class="empty" v-if="!dataList.length">
				<u-empty mode="list"  :text="$t('list.empty')" />
			</section>
		</view>
	</view>
</template>

<script>
	import {
		goods_lists,
		goods_collect,
		goods_collect_del,
		cartAdd
	} from '@/apis'
	export default {
		data() {
			return {
				keyword: '',
				dataList: [],
				page: 1
			}
		},
		onShow() {
			this.page = 1
			this.dataList = []
			this.keyword = ''
		},
		onReachBottom() {
			this.page++
			this.goods_lists()
		},
		methods: {
			handleSearch() {
				this.dataList = []
				this.page = 1
				this.goods_lists()
			},
			async goods_lists() {
				const res = await goods_lists({
					cate_id: '',
					keywords: this.keyword,
					recommend: 0,
					order_type: 1,
					page: this.page
				})
				this.dataList = this.dataList.concat(...res.data)
			},
			async handleLike(id, index, isDel) {
				if (isDel == 0) {
					await goods_collect({
						goods_id: id
					})
				} else {
					await goods_collect_del({
						goods_id: id
					})
				}
				this.dataList[index].collect_status = this.dataList[index]
					.collect_status == 0 ? 1 : 0
			},
			async cartAdd(id) {
				await cartAdd({
					goods_id: id
				})
				this.helper.showToast(this.$t('message.success'))
			}
		}
	}
</script>